import ThemeSwitch from '@/components/ThemeSwitch/index';
import siteMetadata from '@/data/siteMetadata';
import React from 'react';
import "./globals.css";
import { ThemeProviders } from './theme-providers';
import { dir } from 'i18next';
import LangSwitch from '@/components/LangSwitch/index';
import { Inter } from 'next/font/google';
import Header from '@/components/Header/index';
import Footer from '@/components/Footer/index';

const inter = Inter({ subsets: ['latin'] })
// 添加静态路由
export async function generateStaticParams() {
  return siteMetadata.languages.map((lng) => ({ lng }))
}

export const metadata = {
  metadataBase: new URL(siteMetadata.siteUrl),
  title: {
    default: siteMetadata.title,
    template: `%s | ${siteMetadata.title}`,
  },
  description: siteMetadata.description,
  openGraph: {
    title: siteMetadata.title,
    description: siteMetadata.description,
    url: './',
    siteName: siteMetadata.title,
    images: [siteMetadata.socialBanner],
    locale: 'zh_CN',
    type: 'website',
  },
  alternates: {
    canonical: './',
    types: {
      'application/rss+xml': `${siteMetadata.siteUrl}/feed.xml`,
    },
  },
  referrer: 'no-referrer',
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  twitter: {
    title: siteMetadata.title,
    card: 'summary_large_image',
    images: [siteMetadata.socialBanner],
  },
}

export default function RootLayout({ children, params: { lng } }: { children: React.ReactNode, params: any }) {
  return (
    // 1. html 使用 suppressHydrationWarning 取消水合错误警告，这是因为 next-theme 会修改 html 元素的属性。因为 suppressHydrationWarning 只作用于一层，所以不用担心它会影响整个应用的水合错误警告。
    // 2. 使用 ThemeProviders 组件包裹 children
    <html
      lang={lng}
      dir={dir(lng)}
      className={inter.className}
      suppressHydrationWarning>
      <body>
        <ThemeProviders>
          <Header />

          {children}

          <Footer />
        </ThemeProviders>
      </body>

    </html>
  );
}

